
<template>
    <div class="father">
        <h3>父组件</h3>
        <div>
            <!-- v-model 用在html上 -->
            <!-- <input type="text" v-model="username" /> -->
    
            <!--  <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value" /> -->
        
            <!-- v-model 用在组件上 -->
            <!-- <el-input type="text" v-model="username" /> -->
            <!-- <MyInput type="text" v-model="username" /> --> <!-- 等价于下面一行 -->
            <MyInput :modelValue="username" @update:modelValue="username = $event" />
        </div>
        
      <Child v-model:ming="username" v-model:pass="password" />
    </div>
</template>
<!-- 
    对于原生事件，$event就是事件对象====》能.target
    对于自定义事件，$event就是触发事件时，所传的参数数据==>不能.target
    
    v-model :既能父传子，也能子传父
 -->
<script lang="js" setup>
    import Child from './Child.vue';
    import MyInput from './MyInput.vue';
    
    import { ref } from 'vue';
    
    let username = ref('huang');
    let password = ref('123456');
</script>
<style scoped>
    .father{
        background-color: #e77345;
        padding: 20px;
        border-radius: 10px;
    }
</style>